/* eslint-disable react-hooks/exhaustive-deps */
import {
  DeleteOutlined,
  ExportOutlined,
  ImportOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PlusCircleOutlined,
  UnorderedListOutlined,
} from '@ant-design/icons';
import { Button, Popconfirm } from 'antd';
import { CSSProperties, useEffect, useState } from 'react';
import { CSSTransition } from 'react-transition-group';

import './index.css';
import ChatItem from './ChatItem';
import {
  createNewChat,
  deleteChatItem,
  deleteChatList,
  getChatList,
  updateChatItemInfo,
} from '@src/utils/chat';
import { IChatItem } from '@src/types/chat';
import { useChatState } from '@src/store/chat/hooks';
import { useChatRouter } from '@src/hooks/router';

interface IProps {
  styles: CSSProperties;
}
// 对话列表组件
const ChatListComp: React.FC<any> = ({ styles }: IProps) => {
  const [showChatList, setShowChatList] = useState(true); // 是否展示会话列表
  const [chatList, setChatList] = useState(getChatList() || []); // 获取所有的会话列表
  const [selectedChatId] = useChatState('chatId');
  // 更新路由
  const updateRouter = useChatRouter();

  // 监听路由变化
  useEffect(() => {
    // 没找到对应的，就重新去localStore里面拉取一下，就有可能是新建的情况
    if (!(chatList || []).find((item) => item.chatId === selectedChatId)) {
      setChatList(getChatList());
    }
  }, [selectedChatId]);

  // 点击新建会话
  const createNewChatClick = () => {
    const curSession = createNewChat();
    updateRouter(curSession.chatId);
  };

  // 更改名字
  const onChangeName = (item: IChatItem, value: string) => {
    const newChatList = updateChatItemInfo(item.chatId, {
      ...item,
      name: value,
    });
    setChatList(newChatList);
  };

  // 删除会话
  const onDeleteChat = (item: IChatItem) => {
    const newChatList = deleteChatItem(item.chatId);
    setChatList(newChatList);
  };

  // 清空列表
  const onDeleteChatList = () => {
    deleteChatList();
    setChatList([]);
    updateRouter('');
  };

  return (
    <CSSTransition in={showChatList} timeout={200} classNames='fade'>
      {showChatList ? (
        <div
          className='h-99-per w-[360px] py-3 pl-4 rounded-tl-xl rounded-bl-xl bg-gradient-to-b from-[#f7f7f8] to-[#e3f6f7]'
          style={styles}>
          {/* 顶部 */}
          <div className='h-[13%] mt-[2%] text-base pr-4'>
            <div className='text-gray-500 flex items-center justify-between'>
              <div className='ml-3'>
                <UnorderedListOutlined />
                <span className='ml-3'>对话列表</span>
              </div>
              <div>
                <Button
                  onClick={() => setShowChatList(false)}
                  icon={<MenuFoldOutlined />}
                  type='text'></Button>
              </div>
            </div>
            <Button
              onClick={createNewChatClick}
              icon={<PlusCircleOutlined />}
              className='w-full mt-4'
              type='dashed'
              size='large'>
              创建新对话
            </Button>
          </div>
          {/* 中间 */}
          <div className='h-[72%] pr-4 overflow-scroll'>
            {(chatList || []).map((item) => {
              return (
                <div
                  key={item.chatId}
                  className='my-3'
                  onClick={() => updateRouter(item.chatId)}>
                  <ChatItem
                    isSeleted={item.chatId === selectedChatId}
                    desc={item.name}
                    onChange={(value) => onChangeName(item, value)}
                    onDelete={() => onDeleteChat(item)}
                  />
                </div>
              );
            })}
          </div>
          {/* 底部 */}
          <div className='h-[15%] flex flex-col justify-around pr-4'>
            <Popconfirm
              title='是否要删除整个聊天列表，此操作不可恢复'
              onConfirm={onDeleteChatList}
              okText='是'
              cancelText='否'>
              <Button
                className='w-full text-left text-[15px] h-[42px]'
                icon={<DeleteOutlined />}
                type='text'>
                清空列表
              </Button>
            </Popconfirm>
            <Button
              className='w-full text-left text-[15px] h-[42px]'
              icon={<ImportOutlined />}
              type='text'>
              导入对话
            </Button>
            <Button
              className='w-full text-left text-[15px] h-[42px]'
              icon={<ExportOutlined />}
              type='text'>
              导出对话
            </Button>
          </div>
        </div>
      ) : (
        <div className='w-full fixed top-[7%] left-[4%]'>
          <Button
            size='large'
            onClick={() => setShowChatList(true)}
            icon={<MenuUnfoldOutlined />}
            type='text'></Button>
        </div>
      )}
    </CSSTransition>
  );
};

export default ChatListComp;
